<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 设置苹果工具栏颜色 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" href="${path }/resource/css/font/iconfont.css">
<title>商品分类</title>
<style>
/*公共样式*/
html, body, .category-wrap {
	height: 100%;
	width: 100%;
	font-family: "Microsoft YaHei";
	margin: 0;
	font-size: 14px;
}

div, h1, h2, h3, h4, h5, h6, p, ul {
	padding: 0;
	margin: 0;
}

ul li {
	list-style: none;
}

a, a:hover, a:focus, a:active {
	text-decoration: none;
}

.clearfix {
	clear: both;
}

input, input:focus {
	outline: 0;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #ccc;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #ccc;
}

input:-ms-input-placeholder {
	color: #ccc;
}

input::-webkit-input-placeholder {
	color: #ccc;
}

/*分类页面*/
.item-nav {
	background-color: #EEE;
	padding: 9px 0;
}

.first-nav {
	padding: 0;
	margin: 0 10px;
	height: 44px;
	line-height: 44px;
	background-color: #fff;
	color: #666;
}

.item-nav  .first-nav {
	padding: 0 10px;
	margin: 0;
}

.category-wrap a {
	display: inline-block;
	width: 100%;
	color: #999;
}

.nav-name {
	font-weight: 500;
	color: #666;
}

.icon-right {
	font-size: 17px;
	float: right;
	color: #5F646E;
	font-weight: 700;
}

.first-nav.no-sub-cat-nav {
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.search-items-nav-text {
	font-size: 12px;
	color: #CCC;
	float: right;
}

.sub-nav-item {
	height: 50px;
	line-height: 50px;
	width: 50%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	background-color: #fff;
	margin-top: 3px;
}

.sub-nav-content {
	background-color: #eee;
	padding-left: 12px;
	font-size: 12px;
	color: #666;
}

.shop-sub-nav-item-0 .sub-nav-content {
	margin-right: 2px;
}

/*头部*/
.head {
	height: 48px;
	position: relative;
	width: 100%;
	border-bottom: solid 1px #EEE;
	background-color: #000;
	z-index: 120;
	box-sizing: border-box;
}

.head .back {
	width: 34px;
	height: 48px;
	font-family: tm-list-m-font;
	font-style: normal;
	visibility: visible;
	z-index: 999;
	line-height: 48px;
	font-size: 25px;
	color: #5F646E;
	position: absolute;
	text-align: center;
}

.head .back .icon-left {
	font-size: 24px;
	color: #FFFFFF;
	font-weight: 500;
}

.head .searchbar_wrap {
	padding: 8px 54px 8px 46px;
	height: 32px;
}

.head .searchbar_wrap .searchbar {
	background-color: #EEE;
	height: 100%;
	color: #666;
	line-height: 30px;
	border-radius: 2px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-ms-border-radius: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	font-size: 14px;
	position: relative;
}

.head .searchbar_wrap .searchbar input {
	font-size: 14px;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 8px 12px;
	box-sizing: border-box;
	line-height: 1;
	color: #333333;
}

.head .searchbar_wrap .searchbar .icon-search {
	padding: 0 12px;
	position: absolute;
	right: 0px;
	top: 2px;
	font-weight: 700;
}

.head .searchbar_wrap .searchbar input:after {
	content: ' ';
	display: inline-block;
	width: 30px;
}

.head .shop-category {
	padding-top: 11px;
	font-size: 10px;
	color: #fff;
	right: 0;
	top: 5px;
	width: 54px;
	height: 40px;
	line-height: 40px;
	position: absolute;
	text-align: center;
}

.head .shop-category .icon-fenlei {
	position: absolute;
	right: 16px;
	top: -8px;
	color: #fff;
	font-size: 20px;
}
</style>
</head>
<body>
	<div class="category-wrap">
<!-- 		<div class="head"> -->
<!-- 			<div class="back"> -->
<!-- 				<a href="#" onclick="javascript:history.back(-1);" -->
<!-- 					class="iconfont icon-left"></a> -->
<!-- 			</div> -->
<!-- 			<div class="searchbar_wrap"> -->
<!-- 				<div class="searchbar"> -->
<!-- 					<input type="text" placeholder="请输入关键字"> <span -->
<!-- 						class="iconfont icon-search"></span> -->
<!-- 				</div> -->
<!-- 			</div> -->
<!-- 			<div class="shop-category"> -->
<!-- 				<span class="iconfont icon-fenlei"></span> 分类 -->
<!-- 			</div> -->
<!-- 		</div> -->
		<ul>
			<li class="item-nav">
				<div class="first-nav clearfix">
					<a href="${path}/app/redirect/goods/goods_center" class="nav-title clearfix"> <span class="nav-name">全部宝贝</span>
						<div class="iconfont icon-right"></div>
					</a>
				</div>
			</li>
			<li class="">
				<c:forEach items="${categoryParent}" var="parent">
				<div class="first-nav clearfix">
					<a href="${path}/app/goods/chooseCategory?parentId=${parent.catId}" class="nav-title clearfix">
						<span class="nav-name">${parent.catName}</span>
						<div class="search-items-nav-text">查看全部</div>
					</a>
				</div>
				<ul class="sub-nav clearfix">
					<c:forEach items="${categoryChild[parent.catId]}" var="child" varStatus="status" >
					<c:if test="${status.index % 2 eq 0}">
					<li class="sub-nav-item shop-sub-nav-item-0">
						<div class="sub-nav-content">
							<a href="${path}/app/goods/chooseCategory?childId=${child.catId}" class=" nav-title">${child.catName}</a>
						</div>
					</li>
					</c:if>
					<c:if test="${status.index % 2 eq 1}">
					<li class="sub-nav-item shop-sub-nav-item-1">
						<div class="sub-nav-content">
							<a href="${path}/app/goods/chooseCategory?childId=${child.catId}" class=" nav-title">${child.catName}</a>
						</div>
					</li>
					</c:if>
					</c:forEach>
				</ul>
				</c:forEach>
			</li>

		</ul>
	</div>
</body>
</html>